<template>
  <div class="dialog" v-show="showMask">
    <div class="dialog-container">
      <div class="dialog-title">{{title}}</div>
      <div class="content" >

      	<div class="elevator-number-content">
      		<div class="elevator-number-text">电梯编号:</div>
      		<input class="elevator-number-desc"  v-model="elevatorNumber"  />
      	</div>
      	
      	<div class="elevator-number-content">
      		<div class="elevator-number-text">电梯类型:</div>
      		<input class="elevator-number-desc"  v-model="elevatorType"  />
      	</div>

      	<div class="elevator-number-content">
      		<div class="elevator-number-text">电梯名称:</div>
      		<input class="elevator-number-desc"  v-model="elevatorName"  />
      	</div>
 
       	<div class="elevator-number-content">
      		<div class="elevator-number-text">电梯SN号:</div>
      		<input class="elevator-number-desc"  v-model="elevatorSn"   />
      	</div>


      	
      </div>
      <div class="btns">
        <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
          {{cancelText}}
        </div>
        <div v-if="type == 'danger'" class="danger-btn" @click="clickDangerAdd">
          {{dangerText}}
        </div>
        <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
          {{confirmText}}
        </div>
      </div>
      <div class="close-btn" @click="closeMask"><i class="iconfont icon-close">&#xe625;</i></div>
    </div>


    	

    <toast></toast>
  </div>
</template>
<script>

  import Toast from '@/components/toast/Toast'
  export default {
    name: 'Add',
    components: {
      Toast
    },
    props: {
      value: {},
      // 类型包括 defalut 默认， danger 危险， confirm 确认，
      type: {
        type: String,
        default: 'default'
      },
      list:{
      	type:Array
      },     
      areaList: {
      	type:Array
      },
      content: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      cancelText: {
        type: String,
        default: 'cancel'
      },
      dangerText: {
        type: String,
        default: '删除'
      },
      confirmText: {
        type: String,
        default: '确认'
      },
    },
    data() {
      return {
        menuName: 'menuName', // 显示菜单名称的属性
      	elevatorType:"",
        showMask: false,
        elevatorNumber:"",  //电梯编号修改后的值;
        elevatorType:"",  //电梯类型修改后的值; 
        elevatorName:"",  //电梯名称修改后的值;
        elevatorSn:"",  //电梯SN号修改后的值;
        elevatorAddList:{},
        showNoData:false,
        areaVal:false,
        areaListData:this.areaList,
      }
    },
    methods: {
    	//点击选择区域;
		handleSelectArea() {
			this.areaVal = true

		},
      closeMask() {
        this.showMask = false;
      },
      closeBtn() {
        this.$emit('cancel');
        this.closeMask();
				console.log(this.areaList)
      },
      clickDangerAdd() {
        this.$emit('danger');
        //this.closeMask();
        if(!this.elevatorNumber) {
          this.$toast('请输入电梯编号');
          return false;
        } else if(!this.elevatorType) {
          this.$toast('请输入电梯类型');
          return false;
			} if(!this.elevatorName) {
          this.$toast('请输入电梯名称');
          return false;
        } else if(!this.elevatorSn) {
          this.$toast('请输入电梯SN');
          return false;
        }
        
        this.elevatorAddList.elevatorNumber = this.elevatorNumber;
        this.elevatorAddList.elevatorType = this.elevatorType;
        this.elevatorAddList.elevatorName = this.elevatorName;
        this.elevatorAddList.elevatorSn = this.elevatorSn;
        //console.log(this.elevatorUpdatedList)
        this.$emit('addElevator', this.elevatorAddList);
      },
      confirmBtn() {
        this.$emit('confirm');
        this.closeMask();
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    },
  }
</script>
<style lang="stylus" scoped="scoped">
.hide{
	display: none;
}
.elevator-number-content{
height: 0.6rem;
width: 100%;
margin-top: 0.2rem;
}
.elevator-number-text{
height: 0.6rem;
line-height: 0.6rem;
float: left;
width: 30%;
text-align: center;
background: rgb(230, 66, 64);
color: white;
border-radius: 0.1rem;
}
.elevator-number-desc{
height: 0.6rem;
line-height: 0.6rem;
float: left;
width: 64%;
text-align: center;
overflow: hidden;
background: #ccc;
margin-left: 2%;
}
.elevator-belonged-area{
	height: 0.6rem;
line-height: 0.6rem;
float: left;
width: 38%;
text-align: center;
overflow: hidden;
background: #ccc;
margin-left: 2%;
}
.select-area{
height: 0.6rem;
float: left;
width: 24%;
text-align: center;
overflow: hidden;
background: #ccc;
margin-left: 2%;
font-size: 13px;
background: #4FC1E9;
color: white;
border-radius: 4px;
}
.icon-close{
	font-size: 22px;
	color: white;
}
    .dialog{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        .dialog-container{
            width: 80%;
            height: 246px;
            background: #ffffff;
            position: absolute;
            top: 29%;
            left: 9.5%;


            .dialog-title{
                width: 100%;
                height: 33px;
                line-height: 33px;
                font-size: 16px;
                letter-spacing: 2px;
                color: #696969;
                font-weight: 400;
                text-align: center;
                background: #4FC1E9;
                box-sizing: border-box;
                color: white;
      
            }
            .content{
                color: #797979;
                line-height: 26px;
                padding: 0 20px;
                box-sizing: border-box;
            }
            .inp{
                margin: 10px 0 0 20px;
                width: 200px;
                height: 40px;
                padding-left: 4px;
                border-radius: 4px;
                border: none;
                background: #efefef;
                outline: none;
                &:focus{
                    border: 1px solid #509EE3;
                }
            }
            .btns{
            	margin-top: 0.3rem;
                width: 100%;
                height: 35px;
                bottom: 0;
                left: 0;
                box-sizing: border-box;
                & > div{
                    display: inline-block;
                    height: 35px;
                    line-height: 35px;
                    padding: 0 14px;
                    color: #ffffff;
                    background: #f1f1f1;
                    border-radius: 8px;
                    margin-right: 12px;
                    cursor: pointer;
                }
                .default-btn{
                    color: #787878;
                    height: 35px;
                    line-height: 35px;
                    float: left;
                    margin-left: 17%;
                    background: #4FC1E9;
                    color:white; 
                    &:hover{
                        color: #509EE3; 
                    }
                }
                .danger-btn{
                    background: #EF8C8C;
                    margin-left: 10%;
                    &:hover{
                        background: rgb(224, 135, 135);
                    }
                    &:active{
                        background: #EF8C8C;
                    }
                }
                .confirm-btn{
                    color: #ffffff;
                    background: #509EE3;
                    &:hover{
                        background: #6FB0EB;
                    }
                }
            }
            .close-btn{
                position: absolute;
                top: 3px;
                right: 2px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
                &:hover{
                    font-weight: 600;
                }
            }
        }
    }
</style>
